import QtQuick 1.0

Item {
    id: container
    width: ListView.view.width; height: 60; anchors.leftMargin: 10; anchors.rightMargin: 10

    Rectangle {
        id: content
        anchors.centerIn: parent; width: container.width - 40; height: container.height - 10
        color: "transparent"
        smooth: true
        radius: 10
	
        Image {
	  id:img
	  source: "http://i.ytimg.com/vi/"+id+"/0.jpg" ;  
	  smooth: true ; 
	  width:200 ; height:200}
	  
         Rectangle {
	    color: "#91AA9D"
	    anchors.top:img.bottom
	    anchors.verticalCenter: content.verticalCenter
	    Text {
	      id: label
	      text: title
	      color: "#193441"
	      font.pixelSize: 30
	    }	
	 }
    }

    
    
    

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true

        onClicked: {
            ListView.view.currentIndex = index
            container.forceActiveFocus()
        }
    }

    Keys.onPressed: {
		if (event.key == Qt.Key_Return) {
		    console.log("selected :"  + id );
		    event.accepted = true;
		}
    }
    
    states: State {
        name: "active"; when: container.activeFocus
        PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 }
        PropertyChanges { target: label; font.pixelSize: 16 }
    }

    transitions: Transition {
        NumberAnimation { properties: "scale"; duration: 100 }
    }
}
